<template>
  <div class="search-show">
    <el-container>
      <el-header class="search-header">
        <div class="searIbx">
          <el-button class="btn-back fl" @click="goBack" title="返回">
            <i class="fa fa-chevron-left fa-lg"></i>
          </el-button>
          <input-tag class="fl" placeholder="输入条件后回车" v-model="keyWords" @keyup.enter.native="keyupGetAllList" :add-tag-on-blur="true"></input-tag>
          <el-button type="primary" class="in-searEnt" @click="getAllList">
            <i class="fa fa-search"></i>搜索</el-button>
        </div>
      </el-header>
      <div class="tags-search-group">
        <span class="search-title">标签选择:</span>
        <div v-for="tag in searchTagsList" :key="tag.id" class="tag-search">
          <el-checkbox v-model="tag.isChecked"></el-checkbox>
          <span @click="tag.isChecked=!tag.isChecked">{{tag.displayname}}</span>
        </div>
      </div>
      <el-main class="search-content">
        <el-tabs v-model="activeName" @tab-click="tabClickHandler">
          <el-tab-pane v-for="tab in tabsList" :label="`${tab.val}(${tab.count})`" :name="tab.key" :key="tab.key"></el-tab-pane>
        </el-tabs>
        <el-container>
          <el-row>
            <!--左侧菜单树-->
            <el-col :span="17" :offset="1">
              <!--表格-->
              <object-table :tableData="tableData" @jumpToObjShow="jumpToObjShow" @handlerClick="viewObjectInfo" :loading="loading" v-on:openSetTagsDialog="openSetTagsDialog" v-on:openSetGroupDialog="openSetGroupDialog" @showProperty="showProperty" style="margin-top:10px;"></object-table>
              <el-button type="" plain size="mini" @click="checkedAll" style="margin-top:5px" v-show="tableData.length!=0">全选</el-button>
              <el-button size='mini' type="primary" @click="openSetTagsSelObj" plain v-show="tableData.length!=0">设置标签</el-button>
              <el-button size='mini' type="primary" @click="openSetGroupSelObj" plain v-show="tableData.length!=0" v-if="activeName =='socialaccount'||activeName =='keyfigures'||activeName =='focusgroup'">移动到分组</el-button>
              <el-pagination style="margin-top:16px;" background layout="prev, next,total" :current-page="page" :page-size="page_size" @current-change="handlerChangePage" @size-change="handlerChangeSize" :total="count">
              </el-pagination>
            </el-col>
            <el-col :span="5" :offset="1" class="property">
              <div class="property-header">详细信息</div>
              <div v-for="item in propertyList" :key="item.propertyUri">
                <span class="property-name">{{item.propertyName}}:</span>
                <div v-if="item.propertyType == 'TimeInterval'">
                  <p v-for="itemValue in item.propertyValues">
                    <span>{{itemValue.value.timeStart}} - {{itemValue.value.timeEnd}}</span>
                  </p>
                </div>
                <div v-else-if="item.propertyType == 'GisData'">
                  <p v-for="itemValue in item.propertyValues">
                    <span>{{itemValue.value.address}} , {{itemValue.value.longitude}} , {{itemValue.value.latitude}}</span>
                  </p>
                </div>
                <div v-else>
                  <p v-for="itemValue in item.propertyValues">
                    <span>{{itemValue.value}}</span>
                  </p>
                </div>
              </div>
              <el-button size='mini' type="primary" plain @click="jumpToObjShow2" v-show="propertyList.length!=0" class="openObjShowBtn">查看详情</el-button>
            </el-col>
          </el-row>
        </el-container>
      </el-main>
    </el-container>
    <div class="echarts-box" :class="{'transition-class':!showEcharts}">
      <div class="tool" v-if="!showEcharts" @click="openEcharts"><i class="el-icon-arrow-left"></i>统计分析</div>
      <div class="tool" v-if="showEcharts" @click="showEcharts=!showEcharts"><i class="el-icon-arrow-right"></i>统计分析</div>
      <social-account-pie ref="socialAccountPie" :data="pieData" @pieClick="pieClick" v-if="pieData.length>0"></social-account-pie>
      <social-dynamic-bar ref="socialDynamicBar" :data="barData" @barClick="barClick" v-if="barData.length>0"></social-dynamic-bar>
    </div>
    <!-- 设置标签模态框 -->
      <tag-management ref="tagManagement" :parseTagsList='parseTagsList' @markTags='markTags' @getTags='getTags'></tag-management>
    <!-- 设置分组模态框 -->
    <el-dialog title="分组设置" :visible.sync="groupDialogVisible" width="40%">
      <subscribegroup-tree :groupObjs="groupObjs" :type="type" ref="subscribegroupTree" v-on:closeDialog="closeDialog"></subscribegroup-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="groupDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="markGroup">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import InputTag from 'vue-input-tag'
import ObjectTable from './object-table.vue'
import AssociationInfo from './association_info.vue'
import util from '@/utils'
import mapUtil from '@/utils/mapUtil'
import subscribegroupTree from './subscribegroup-tree.vue'
import socialAccountPie from './social-account-pie.vue'
import socialDynamicBar from './social-dynamic-bar.vue'
import tagManagement from './tag-management.vue'
import {
    searchFullTextList,
    searchGroupFullTextCount,
    searchFullTextCount,
    getAssociationAttr,
    getRelationInfo,
    tagsSave,
    getTags,
    getBizGroupEnum
} from '@/api/search'
import { getdetail } from '@/api/relationFraph'
export default {
    data () {
        return {
            page: 1,
            count: 0,
            totalCount: 0,
            // 实体总条数
            entityCount: 0,
            // 文档总条数
            documentCount: 0,
            // 事件总条数
            eventCount: 0,
            // 多媒体条数
            mediaCount: 0,
            // 每页条数
            page_size: 10,
            // 搜索关键字
            // searchVal: '',
            keyWords: [],
            enterType: 'All',
            // 类型
            type: '',
            // objectList: [],
            // 对象
            defaultProps: {
                children: 'children',
                label: 'displayname'
            },
            expandAll_flag: true,
            // 左侧菜单树数据
            treeData: [],
            // 表格数据
            tableData: [],
            loading: true,
            isShowObj: false,
            // 图标,名称
            objectInfo: {},
            // 相关属性
            association_Attr: [],
            // 相关事件
            association_Event: [],
            // 相关实体
            association_Entity: [],
            // 相关文档
            association_Doc: [],
            // 相关多媒体
            association_Media: [],
            mapReloadData: [],
            // 事件loading标识符
            event_loading: false,
            // 实体loading标识符
            entity_loading: false,
            // 文档loading标识符
            document_loading: false,
            // 多媒体loading标识符
            media_loading: false,
            // 属性loading标识符
            attr_loading: false,
            tagsList: [],
            parseTagsList: [],
            searchTagsList: [],
            addTagName: '',
            addtagspopover: false,
            // 饼状图数据
            pieData: [],
            // 柱状图
            barData: [],
            // 饼图objList
            pieObjectList: [],
            // 柱状图objlist
            barObjectList: [],
            // tab栏数据
            tabsList: [],
            activeName: 'socialaccount',
            tabKey: '',
            selectedData: {},
            isSelectedObj: false,
            groupDialogVisible: false,
            groupObjs: [], // 传给分组的数据,
            showEcharts: false,
            propertyList: [], // 详情获取属性值,
            searchTableData: {}
        }
    },
    components: {
        ObjectTable,
        AssociationInfo,
        InputTag,
        subscribegroupTree,
        socialAccountPie,
        socialDynamicBar,
        tagManagement
    },
    computed: {
        rowkeyList: function () {
            let a = []
            this.tableData.forEach(item => {
                if (item.isChecked) {
                    a.push({ rowkey: item.rowkey, objecturi: item.objecturi })
                }
            })
            return a
        },
        rowkeyObjList: function () {
            let a = []
            this.tableData.forEach(item => {
                if (item.isChecked) {
                    a.push({ rowkey: item.rowkey, objecturi: item.objectUri })
                }
            })
            return a
        },
        tagsCheckedList: {
            get: function () {
                let a = []
                this.parseTagsList.forEach(item => {
                    if (item.isChecked) a.push(item.displayname)
                })
                return a
            },
            set: function () {}
        },
        searchTagsCheckedList: function () {
            let a = []
            this.searchTagsList.forEach(item => {
                if (item.isChecked) a.push(item.displayname)
            })
            return a
        },
        objectList: {
            get: function () {
                let a = []
                a.push(...this.pieObjectList)
                a.push(...this.barObjectList)
                return a
            },
            set: function () {}
        }
    },
    watch: {
        pieObjectList: function () {
            this.objectList = []
            this.objectList.push(...this.pieObjectList)
            this.objectList.push(...this.barObjectList)
        },
        barObjectList: function () {
            this.objectList = []
            this.objectList.push(...this.pieObjectList)
            this.objectList.push(...this.barObjectList)
        },
        parseTagsList: function () {
            this.tagsCheckedList = []
            this.parseTagsList.forEach(item => {
                if (item.isChecked) this.tagsCheckedList.push(item.displayname)
            })
        }
    },
    created () {
    // 接收搜索页面传递的参数
        this.enterType = this.$route.query.enterType
        if (!util.isEmpty(this.$route.query.searchVal)) {
            this.keyWords.push(this.$route.query.searchVal)
        }
    },
    mounted () {
        this.getBizGroupEnum()
        this.getTags()
        window.onresize = util.debounce(this.resizeHandler, 200)
    },
    methods: {
        // 打开统计分析
        openEcharts () {
            if (this.pieData.length == 0 || this.barData.length == 0) {
                this.getGroupFullTextCount()
            } else {
                this.showEcharts = !this.showEcharts
            }
        },
        querySearch (queryString, cb) {
            let parseTagsList = this.parseTagsList
            let results = queryString
                ? parseTagsList.filter(this.createFilter(queryString))
                : parseTagsList
            // 调用 callback 返回建议列表的数据
            cb(results)
        },
        createFilter (queryString) {
            return restaurant => {
                return (
                    restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
                )
            }
        },
        keyupGetAllList () {
            document.onkeydown = e => {
                let _key = window.event.keyCode
                if (_key === 13) {
                    this.getAllList()
                }
            }
        },
        async getListCount (params) {
            let data = await searchFullTextCount(params)
            let countTotal = data.countTotal
            for (let item of this.tabsList) {
                if (params.objectType === item.key) {
                    item.count = countTotal
                }
                if (item.key === this.tabKey) this.count = item.count
            }
        },
        async initgetListCount () {
            let params = {
                keywords: this.keyWords,
                tags: this.searchTagsCheckedList,
                objectType: this.tabKey,
                curpage: this.page,
                persize: this.page_size,
                objectList: util.uniq(this.objectList)
            }
            let data = await searchFullTextCount(params)
            for (let item of this.tabsList) {
                if (this.tabKey === item.key) {
                    item.count = data.countTotal
                    this.$set(item, data.countTotal)
                }
            }
        },
        // 获取统计分析饼图和柱状图数据
        async getGroupFullTextCount (isOpened) {
            let groupList = await searchGroupFullTextCount({
                keywords: this.keyWords,
                tags: this.searchTagsCheckedList,
                objectType: 'All',
                curpage: this.page,
                persize: this.page_size
            })
            this.pieData = groupList.entity
            this.barData = groupList.event
            this.barData.sort(function (a, b) {
                return a.value - b.value
            })
            if (!isOpened) {
                this.showEcharts = !this.showEcharts
            }
        },
        // 获取All列表
        async getList () {
            this.tableData = []
            this.loading = true
            // 搜索条件
            let params = {
                keywords: this.keyWords,
                tags: this.searchTagsCheckedList,
                objectType: this.tabKey,
                curpage: this.page,
                persize: this.page_size,
                objectList: util.uniq(this.objectList)
            }
            this.getAllCount()
            let list = await searchFullTextList(params)
            list.forEach(v=>{
                if(v.personIconUrl){
                    v.iconUrl = v.personIconUrl
                }
            })
            this.loading = false
            // 过滤属性
            this.tableData = _.map(list, item => {
                item.isChecked = false
                if (item.tags == null) {
                    item.tags = []
                }
                if (!util.isEmpty(item.showName)) {
                    item.displayName = item.showName
                }
                return item
            })
        },
        // 获取列表
        async getAllList () {
            this.pieObjectList = []
            this.barObjectList = []
            this.getGroupFullTextCount(true)
            if (
                this.$refs.hasOwnProperty('socialDynamicBar') &&
        this.$refs.socialDynamicBar != undefined &&
        this.$refs.socialDynamicBar != null
            ) {
                this.$nextTick(() => {
                    this.$refs.socialDynamicBar.clearData()
                })
            }
            if (
                this.$refs.hasOwnProperty('socialAccountPie') &&
        this.$refs.socialAccountPie != undefined &&
        this.$refs.socialAccountPie != null
            ) {
                this.$nextTick(() => {
                    this.$refs.socialAccountPie.clearData()
                })
            }
            this.tableData = []
            this.loading = true
            // 搜索条件
            let params = {
                keywords: this.keyWords,
                tags: this.searchTagsCheckedList,
                objectType: this.tabKey,
                curpage: this.page,
                persize: this.page_size
            }
            this.getAllCount()
            let list = await searchFullTextList(params)
            this.loading = false
            // 过滤属性
            this.tableData = _.map(list, item => {
                item.isChecked = false
                if (item.tags == null) {
                    item.tags = []
                }
                if (!util.isEmpty(item.showName)) {
                    item.displayName = item.showName
                }
                return item
            })
        },
        // tab切换
        tabClickHandler (tab) {
            this.tabKey = tab.name
            this.type = tab.name
            this.page = 1
            this.getList()
        },
        // 当前页改变时会触发
        handlerChangePage (val) {
            this.page = val
            this.getList()
        },
        // 每页条数改变时会触发
        handlerChangeSize (val) {
            this.page_size = val
            this.getList()
        },
        // 点击饼图
        pieClick (data) {
            this.activeName = 'socialaccount'
            this.tabKey = 'socialaccount'
            this.pieObjectList = data
            this.barObjectList = []
            if (
                this.$refs.hasOwnProperty('socialDynamicBar') &&
        this.$refs.socialDynamicBar != undefined &&
        this.$refs.socialDynamicBar != null
            ) {
                this.$refs.socialDynamicBar.clearData()
            }
            this.searchByObj()
        },
        // 点击柱状图
        barClick (data) {
            this.activeName = 'socialdynamic'
            this.tabKey = 'socialdynamic'
            this.barObjectList = data
            this.pieObjectList = []
            if (
                this.$refs.hasOwnProperty('socialAccountPie') &&
        this.$refs.socialAccountPie != undefined &&
        this.$refs.socialAccountPie != null
            ) {
                this.$refs.socialAccountPie.clearData()
            }
            this.searchByObj()
        },
        searchByObj () {
            this.getList()
            this.initgetListCount()
        },
        checkedAll () {
            let hasCheckedAll = true
            this.tableData.forEach(item => {
                if (!item.isChecked) hasCheckedAll = false
                item.isChecked = true
            })
            if (hasCheckedAll) {
                this.tableData.forEach(item => {
                    item.isChecked = false
                })
            }
        },
        // 列表数据点击事件
        handlerClick (
            objectType,
            objectUri,
            rowKey,
            name,
            displayName,
            icon,
            isAddToMap
        ) {
            this.event_loading = true
            this.entity_loading = true
            this.document_loading = true
            this.media_loading = true
            this.attr_loading = true
            this.isShowObj = false
            this.objectInfo = {
                objectType: objectType,
                icon: icon,
                name: name,
                displayName: displayName,
                objectUri: objectUri,
                rowKey: rowKey
            }
            this.association_Attr = []
            // 获取相关属性
            getAssociationAttr({ rowkey: rowKey, objectUri: objectUri }).then(
                response => {
                    this.mapReloadData = []
                    let propertyList = response.data.propertyList
                    propertyList.map((item, index) => {
                        let valueStr = ''
                        if (item.propertyType === 'GisData') {
                            item.propertyValues.forEach(element => {
                                valueStr +=
                  element.value.address +
                  ',' +
                  element.value.longitude +
                  ',' +
                  element.value.latitude +
                  ';'
                                // 将含有地理属性的对象添加到地图
                                if (isAddToMap) {
                                    mapUtil.tool.addToMap({
                                        longitude: element.value.longitude,
                                        latitude: element.value.latitude,
                                        rowkey: rowKey,
                                        objectUri: objectUri,
                                        objectType: objectType,
                                        displayName: displayName,
                                        name: name,
                                        iconUrl: icon
                                    })
                                    this.mapReloadData.push(item)
                                }
                            })
                        } else if (item.propertyType === 'TimeInterval') {
                            item.propertyValues.forEach(element => {
                                valueStr +=
                  element.value.timeStart + ' - ' + element.value.timeEnd + ';'
                            })
                        } else {
                            item.propertyValues.forEach(element => {
                                valueStr += element.value + ';'
                            })
                        }
                        this.association_Attr.push({
                            displayName: item.propertyName,
                            value: valueStr.substring(0, valueStr.length - 1)
                        })
                    })
                    this.attr_loading = false
                }
            )
            // 获取相关事件
            getRelationInfo({
                rowkey: rowKey,
                objectType: 'com.scistor.object.event'
            }).then(response => {
                this.association_Event = response.data
                this.event_loading = false
            })
            // 相关实体
            getRelationInfo({
                rowkey: rowKey,
                objectType: 'com.scistor.object.entity'
            }).then(response => {
                this.association_Entity = response.data
                this.entity_loading = false
            })
            // 相关文档
            getRelationInfo({
                rowkey: rowKey,
                objectType: 'com.scistor.object.document'
            }).then(response => {
                this.association_Doc = response.data
                this.document_loading = false
            })
            // 相关媒体
            getRelationInfo({
                rowkey: rowKey,
                objectType: 'com.scistor.object.media'
            }).then(response => {
                this.association_Media = response.data
                this.media_loading = false
            })
            if (isAddToMap) {
                if (this.mapReloadData.length === 0) {
                    this.$message.error('这条数据没有地理属性')
                }
            }
            this.isShowObj = true
        },
        renderContent (h, { node, data }) {
            let img
            if (!util.isEmpty(data.icon)) {
                img = (
                    <img
                        src={data.icon}
                        class="userIcon"
                        width="16px"
                        height="16px"
                        style="border-radius:16px;"
                    />
                )
            }
            return (
                <p>
                    {img}
                    <span style="margin-left:10px;">{node.label}</span>
                </p>
            )
        },
        // 对象查看
        viewObjectInfo (
            objectType,
            instanceUri,
            objectUri,
            name,
            displayName,
            icon,
            belongGroup
        ) {
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
            window.open(currentUrl, '')
            // if (objectType == 'com.scistor.object.entity') {
            //     currentUrl = `${currentUrl}#/display?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
            //     window.open(currentUrl, '')
            // } else {
            //     currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
            //     window.open(currentUrl, '')
            // }
        },
        jumpToObjShow (
            objectType,
            instanceUri,
            objectUri,
            name,
            displayName,
            icon,
            belongGroup
        ) {
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
            window.open(currentUrl, '')
        },
        jumpToObjShow2 () {
            let data = this.searchTableData
            let objectType = data.objectType
            let instanceUri = data.rowkey
            let objectUri = data.objectUri
            let name = data.name
            let displayName = data.displayName
            let icon = data.iconUrl
            let belongGroup = data.belongGroup
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
            window.open(currentUrl, '')
        },
        goBack () {
            this.$router.push({
                path: '/search'
            })
        },
        openSetTagsDialog (data) {
            this.isSelectedObj = false
            this.selectedData = data
            this.parseTagsList.forEach(item => {
                item.isChecked = false
            })
            this.$nextTick(() => {
                this.$refs.tagManagement.tagsDialogVisible = true
            })
        },
        openSetGroupDialog (data) {
            this.selectedData = data
            let params = {
                objectUri: data.objectUri,
                rowkey: data.rowkey
            }
            this.groupObjs = []
            this.groupObjs.push(params)
            this.groupDialogVisible = true
        },
        closeDialog () {
            this.groupDialogVisible = false
        },
        // 全选旁边的设置标签
        openSetTagsSelObj () {
            if (this.rowkeyList.length == 0) {
                this.$message.error('请选择标注对象')
                return
            }
            this.isSelectedObj = true
            this.parseTagsList.forEach(item => {
                item.isChecked = false
            })
            this.$nextTick(() => {
                this.$refs.tagManagement.tagsDialogVisible = true
            })
        },
        openSetGroupSelObj () {
            if (this.rowkeyList.length == 0) {
                this.$message.error('请选择标注对象')
                return
            }
            this.groupDialogVisible = true
            this.groupObjs = this.rowkeyObjList
        },
        markTags (data) {
            let rowkeyList
            let params
            if (data.length === 0) {
                this.$message.error('请选择标签')
                return
            }
            if (this.isSelectedObj) {
                // 多个设置
                params = {
                    tagList: data,
                    rowkeyList: this.rowkeyObjList
                }
            } else {
                // 单个设置
                rowkeyList = {
                    rowkey: this.selectedData.rowkey,
                    objecturi: this.selectedData.objectUri
                }
                params = {
                    tagList: data,
                    rowkeyList: [rowkeyList]
                }
            }
            tagsSave(params).then(response => {
                this.$refs.tagManagement.tagsDialogVisible = false
                this.tableData.forEach(item => {
                    // 页面展示标签
                    for (let el of params.rowkeyList) {
                        if (el.rowkey.indexOf(item.rowkey) > -1) {
                            this.$message(response.msg)
                            item.tags.push(...params.tagList)
                            item.tags = util.uniq(item.tags)
                        }
                    }
                })
            })
        },
        markGroup () {
            this.$refs.subscribegroupTree.chooseGroupTree()
        },
        shrchTagsShow () {},
        // 获取tab栏数据
        getBizGroupEnum () {
            getBizGroupEnum().then(response => {
                // this.tabsList = response.data.slice(0, response.data.length - 2)
                response.data.forEach(val => {
                    if (val.key === 'socialaccount') {
                        val.val = '实体'
                    }
                    if (val.key === 'socialdynamic') {
                        val.val = '事件'
                    }
                })
                this.tabsList = response.data
                this.tabKey = response.data[0].key
                // this.getAllCount()
                this.getList()
            })
        },
        getAllCount () {
            for (let item of this.tabsList) {
                if (!item.hasOwnProperty('count')) {
                    item.count = 0
                }
                let params = {
                    keywords: this.keyWords,
                    tags: this.searchTagsCheckedList,
                    objectType: item.key,
                    curpage: this.page,
                    persize: this.page_size,
                    objectList: util.uniq(this.objectList)
                }
                this.getListCount(params)
            }
        },
        getTags () {
            getTags().then(response => {
                response.data.forEach(item => {
                    item.isChecked = false
                })
                this.parseTagsList = response.data
                this.parseTagsList.forEach(item => {
                    item.value = item.displayname
                })
                this.searchTagsList = JSON.parse(JSON.stringify(this.parseTagsList))
            })
        },
        resizeHandler () {
            this.$refs.socialAccountPie.resize()
            this.$refs.socialDynamicBar.resize()
        },
        showProperty (data) {
            this.searchTableData = data
            this.getNodeDetails(data.rowkey, data.objectUri)
        },
        // 获取详情
        getNodeDetails (_rowkey, _objectUri) {
            let getdetailObj = {
                rowkey: _rowkey,
                objectUri: _objectUri
            }
            getdetail(getdetailObj).then(res => {
                if (res.status == 200) {
                    this.propertyList = res.data.propertyList
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.el-tabs__content {
  height: 0;
}
.property {
  margin-top: -45px;
  padding-right: 10px;
  .property-header {
    padding-bottom: 8px;
    border-bottom: 2px solid #e4e7ed;
  }
  .property-name {
    display: block;
    color: #666;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
  }
  p {
    word-break: break-all;
  }
  .openObjShowBtn {
    margin-top: 20px;
    float: right;
  }
}
.search-show {
//   position: relative;
  .echarts-box {
    transition: right 0.5s;
    -moz-transition: right 0.5s;
    -webkit-transition: right 0.5s;
    -o-transition: right 0.5s;
    min-height: 1px;
    position: fixed;
    right: 0;
    top: 100px;
    width: 25%;
    border: 1px solid #ccc;
    background: #fff;
    padding: 10px;
    z-index: 100;
    .tool {
      z-index: 100;
      position: absolute;
      top: 0;
      left: -35px;
      width: 35px;
      padding: 10px;
      word-wrap: break-word;
      color: #fff;
      background: #27478d;
      cursor: pointer;
    }
  }
  .transition-class {
    right: -25%;
  }
  .el-row {
    width: 100%;
  }
  .search-header {
    padding: 10px 10px;
    .searIbx {
      height: 50px;
      .btn-back {
        height: 40px;
        margin-right: 5px;
        padding: 0 24px;
        background: #fff;
        border: none;
      }
      .global-search {
        height: 50px;
        width: 120px;
        float: left;
      }
      .in-searInp {
        height: 50px;
        width: 580px;
        float: left;
      }
      .el-input__inner {
        height: 40px;
        line-height: 40px;
        font-size: inherit;
        border: solid 1px #3885d5;
      }

      .in-searEnt {
        height: 40px;
        float: left;
        padding: 0 24px;
        background-color: #1169c4;
        font-size: 1em;
      }
    }
  }
  .search-content {
    padding: 0;
    overflow-x: hidden;
    .left_tree {
      min-height: 1px;
    }
    .el-tabs {
      padding-left: 5%;
      //   margin-bottom: -40px;
      padding-right: 25%;
      border-top: 1px solid #efefef;
      height: 60px;
    }
    .el-tab-pane {
      height: 42px;
      line-height: 42px;
      .icon {
        margin-right: 8px;
      }
    }
    .objRshowBox {
      margin-top: 10px;
      .objBx {
        padding: 10px 15px 10px;
        min-height: 86px;
      }
    }
    .association_Atrr {
      padding-left: 15px;
      max-height: 240px;
      min-height: 40px;
      overflow-y: auto;
    }
    .right-content {
      margin-left: 10px;
      h3 {
        margin-top: 10px;
      }
      .tag-title {
        border-top: 1px solid #eee;
        padding-top: 10px;
      }
      .tag-div {
        float: left;
        margin-right: 25px;
        margin-top: 10px;
        border: 1px solid #e1e1e1;
        padding: 5px 5px 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        .x {
          font-size: 14px;
          color: #999;
          vertical-align: super;
          opacity: 0;
          margin-left: 3px;
        }
      }
      .tag-div:hover .x {
        opacity: 1;
      }
      .x:hover {
        font-weight: bold;
        color: #777;
      }
    }
  }
}
.tags-search-group {
  max-width: 100%;
  max-height: 60px;
  overflow: auto;
  margin-left: 80px;
  margin-right: 80px;
  .search-title {
    font-weight: bold;
  }
  .tag-search {
    display: inline-block;
    margin: 5px;
    cursor: pointer;
  }
}
</style>
<style lang="less">
.vue-input-tag-wrapper {
  width: 580px;
  height: 40px;
  .input-tag {
    padding: 5px;
  }
}
</style>
